import React, { Component } from "react"
import {
    View,
    Image,
    Linking,
    Text,
    Alert,
    StyleSheet,
    TextInput, TouchableOpacity, Keyboard, ScrollView, TouchableHighlight
} from "react-native"
import navigationhelper from 'src/components/navigationhelper'
import {checkPhone, deviceHeight, deviceWidth, isIPhoneX} from "src/util"
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"
import { List, InputItem, Flex } from '@ant-design/react-native';
import NavBar from 'src/components/navBar'

@inject('userAuth')
export default class ChagePayPassWord extends Component {
    constructor(props) {
        super(props)
        this.state = {
            oldPhone:'',
            newPhone:''
          
        }
    }

    onDone = () => {
      
    }

    fetchSmsCode = () => {
        if(this.state.isFetchingSMSCode){
            return
        }
        if(!this.phone){
            return Layer.showMsg('手机号不能为空')
        }
        if(!this.state.showPhoneVerified){
            return Layer.showMsg('手机号有误')
        }
        this.props.userAuth.getSmsCode({
            mobile: this.phone
        }).then(() => {
            Layer.showMsg('验证码已发送')
            var timesRun = 0;
            var interval = setInterval(() =>{
                timesRun += 1;
                if(timesRun === 60){
                    this.setState({
                        isFetchingSMSCode: false,
                        smsText: '获取验证码'

                    })
                    clearInterval(interval)
                    return
                }
                this.setState({
                    isFetchingSMSCode: true,
                    smsText: (60 - timesRun)
                })
            }, 1000)
        }).catch(function (error) {
            Layer.showMsg(error.message)
        })
    }
   
    render() {
        return (
          <View>
            <NavBar 
            back={()=>{navigationhelper.goBack() }} 
            title={'重置支付密码'} 
            leftText={'返回'} 
           />
            <ScrollView>
            <List style={{marginTop:20}}>
         <InputItem
          style={styles.inputItem}
           placeholder={'请输入新手机号'}
            // clear
            // value={this.state.value}
            onChange={value => {
              this.setState({
                cardNum:value
              });
            }}>
         <Text style={styles.leftTextStyle}>新密码</Text>  
         </InputItem>

         <InputItem
          style={styles.inputItem}
           placeholder={'请输入验证码'}
            // clear
            // value={this.state.value}
            onChange={value => {
              this.setState({
                cardNum:value
              });
            }}>
         <Text style={styles.leftTextStyle}>确认密码</Text>  
         </InputItem>
        </List>
            </ScrollView>
          </View>

        )
    }
}




const styles = StyleSheet.create({
    container:{
      
    },
    leftTextStyle: {
        color:'#2E2E2E',
        marginLeft:10
      },
      inputItem:{
        fontSize:15,
        marginTop:2,
        marginLeft:20,
      },
})